<script setup lang="ts">
import type { StudentWordItem } from '@/api/types/student'
import { AudioPlayer } from '@/utils/AudioPlayer'
import { ref, watch } from 'vue'
import BaseWordCard from './BaseWordCard.vue'

const props = defineProps<{
  word: StudentWordItem
  isActive: boolean
  type?: 'card' | 'row'
}>()

const emit = defineEmits<{
  (e: 'activate'): void
}>()

const audioPlayer = new AudioPlayer()

enum CardState {
  Initial = 0,
  ShowEnglish = 1,
  ShowBoth = 2,
  HideAll = 3,
  OnlyEnglish = 4,
}

const currentState = ref<CardState>(CardState.Initial)

function handleClick() {
  if (!props.isActive) {
    emit('activate')
    currentState.value = CardState.ShowEnglish
    audioPlayer.play(props.word.audio)
    return
  }

  switch (currentState.value) {
    case CardState.ShowEnglish:
      currentState.value = CardState.ShowBoth
      audioPlayer.play(props.word.audio)
      break
    case CardState.ShowBoth:
      currentState.value = CardState.HideAll
      audioPlayer.play(props.word.audio)
      break
    case CardState.HideAll:
      currentState.value = CardState.ShowEnglish
      audioPlayer.play(props.word.audio)
      break
        // case CardState.OnlyEnglish:
        //     currentState.value = CardState.ShowEnglish
        //     audioPlayer.play(props.word.audio)
        //     break
  }
}

watch(() => props.isActive, (newValue) => {
  if (!newValue) {
    currentState.value = CardState.Initial
  }
})
</script>

<template>
  <BaseWordCard
    :word="word" :is-active="isActive" :type="type" :opacity="currentState === CardState.HideAll"
    @tap="handleClick"
  >
    <template #translation>
      <view v-show="currentState === CardState.ShowBoth" class="word-translation ellipsis-2">
        {{ word.ch }}
      </view>
    </template>
  </BaseWordCard>
</template>

<style scoped lang="scss">
.word-translation{
  font-size: 30rpx;
}
</style>
